<template>
	<view class="ticket-order-page">
		<view class="header">
			<view class="box-bg">
				<uni-nav-bar height="125rpx" dark background-color="#fff" :border="false" color="#000" left-icon="left"
					right-icon="search" @clickLeft="navLeft()" @clickRight="navRight()">
					<view class="select">
						<view class="" @click="selectStatus()">
							<text style="font-size: 30rpx;">门票订单</text><uni-icons :type="select?'up':'down'"
								size="15"></uni-icons>
						</view>
					</view>
				</uni-nav-bar>
			</view>
			<view class="mask" v-show="select">
				<view class="maskBtnBox">
					<button :class="headerType===1?'headerType':''">门票订单</button>
					<button :class="headerType===2?'headerType':''">酒店订单</button>
					<button disabled>机票订单</button>
					<button disabled>车票订单</button>
				</view>
			</view>
			<view class="tabs">
				<view v-for="(tab, index) in tabs" :key="index" @click="switchTab(index)"
					:class="'tad '+(activeTab===index?'active-tab':'')">
					{{ tab }}
				</view>
			</view>
		</view>
		<view class="orders">
			<view class="order" v-for="(order, index) in displayedOrders()" :key="index" @click="goDetails()">
				<view class="order-box">
					<image src="/static/lyyImages/u3127.svg" mode="" style="width: 50rpx;height: 50rpx;"></image>
					<view class="order-info">
						<text class="order-title">门票</text>
						<text class="order-name">{{ order.name }}</text>
						<text class="order-date">{{ order.date }}有效 · {{ order.quantity }}</text>
						<text class="order-voucher">凭「{{ order.voucher }}」取票使用</text>
					</view>
					<view class="order-status-price">
						<view class="statusBox" v-if="order.status==='待支付'||order.status==='未使用'">
							<text style="color: blue;" class="order-status">{{ order.status }}</text>
						</view>
						<view class="statusBox" v-else>
							<text class="order-status" style="color: #8f8f8f;">{{ order.status }}</text>|
							<uni-icons type="trash" size="20" style="color: #ccc"></uni-icons>
						</view>
						<text class="order-price">¥<text style="font-size: 50rpx;">{{ order.price }}</text></text>
					</view>
				</view>
				<view class="btnBox">
					<view class="order-actions">
						<button size="mini" v-if="order.status === '待支付'" class="action-button"
							@click="cancel(order)">取消</button>
						<button size="mini" v-if="order.status === '待支付'" class="action-button gradient"
							@click="goDetails()">去支付</button>
						<button size="mini" v-if="order.status === '未使用'" class="action-button"
							@click="refundTicket(order)">退款</button>
						<button size="mini" v-if="order.status === '未使用'" class="action-button gradient"
							@click="goDetails()">去使用</button>
						<button size="mini" v-if="order.status === '已使用'" class="action-button"
							@click="reviewTicket(order)">去评价</button>
						<button size="mini" v-if="order.status === '已取消'||order.status === '已使用'" class="action-button"
							@click="reserve(order)">再次预订</button>
					</view>
				</view>
			</view>


		</view>

	</view>
</template>
<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	const tabs = ref(['全部', '待付款', '未使用', '待评价'])
	const activeTab = ref(0)
	const select = ref(false)
	const headerType = ref(1)
	const orders = ref([{
			name: '故宫博物院成人票',
			date: '11月26日',
			quantity: '1份',
			voucher: '电子凭证',
			price: 50,
			status: '待支付'
		},
		{
			name: '故宫博物院学生票',
			date: '11月26日',
			quantity: '2份',
			voucher: '电子凭证',
			price: 60,
			status: '未使用'
		},
		{
			name: '故宫博物院成人票',
			date: '11月20日',
			quantity: '1份',
			voucher: '电子凭证',
			price: 30,
			status: '已使用'
		},
		{
			name: '故宫博物院学生票',
			date: '11月19日',
			quantity: '1份',
			voucher: '三种使用方式',
			price: 30,
			status: '已取消'
		}
	])

	function displayedOrders() {
		return this.orders.filter(order => {
			switch (this.activeTab) {
				case 0:
					return true;
				case 1:
					return order.status === '待支付';
				case 2:
					return order.status === '未使用';
				case 3:
					return order.status === '已使用';
				default:
					return false;
			}
		});
	}

	function switchTab(index) {
		activeTab.value = index;
		console.log(activeTab);
	}

	function reserve(order) {
		console.log('再次预定', order);
	}

	function cancel(order) {
		console.log('取消', order);
	}


	function refundTicket(order) {
		console.log('退款', order);
		uni.navigateTo({
			url: '/pagesA/ticketOrders/refund/refund'
		});
	}

	function reviewTicket(order) {
		console.log('去评价', order);
	}

	function goDetails() {
		uni.navigateTo({
			url: '/pagesA/ticketOrders/details/details'
		});
	}

	function selectStatus() {
		select.value = !select.value
		// console.log(this.select);
	}

	function navLeft() {
		uni.navigateBack({
			data: 1
		})
	}

	function navRight() {
		uni.navigateTo({
			url: '/pagesA/ticketOrders/search/search'
		});
	}
</script>

<style scoped>
	.header {
		width: 100%;
		position: fixed;
		top: 0;
		z-index: 10;
	}

	.ticket-order-page {
		width: 100%;
		height: 100%;
		background-color: #f5f5f5;
	}

	.tabs {
		display: flex;
		justify-content: space-around;
		background-color: #fff;
		border-bottom: 1px solid #e0e0e0;
		font-size: 35rpx;
	}

	.tab {
		padding: 20rpx 0;
		color: #666;

	}

	.active-tab {
		color: #007aff;
		border-bottom: 5rpx solid #007aff;
	}

	.orders {
		margin-top: 200rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.order-box {
		display: flex;
		justify-content: space-between;
	}

	.order-box image {
		margin-right: 10rpx;
	}

	.order {
		width: 85%;
		display: flex;
		background-color: #fff;
		padding: 35rpx;
		margin-bottom: 30rpx;
		border-radius: 20rpx;
		flex-direction: column;
	}

	.order-date,
	.order-voucher {
		font-size: 30rpx;
		color: #828282;
	}

	.btnBox {
		padding-top: 20rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.order-info,
	.order-status-price {
		display: flex;
		flex-direction: column;
		/* margin-bottom: 20rpx; */
		font-size: 35rpx;
	}

	.order-info {
		font-size: 35rpx;
	}

	.order-title {
		font-weight: bold;
		font-size: 40rpx;
		margin-bottom: 15rpx;
	}

	.order-status {
		color: #ff4d4f;
	}

	.order-price {
		color: #ff0000;
		font-size: 30rpx;
		margin-top: 60rpx;
		text-align: right;
	}

	.order-actions {
		display: flex;
		gap: 10rpx;
	}

	.action-button {
		margin-top: 20rpx;
		padding: 0rpx 20rpx;
		background-color: #fff;
		border: none;
		border-radius: 15rpx;
		/* color: #333; */
	}

	button {
		width: 200rpx;
		font-size: 30rpx;
	}

	.gradient {
		background: linear-gradient(130deg, #007aff, #1acaff);
		color: #fff;
	}

	.statusBox {
		width: 200rpx;
		/* height: 100rpx; */
		display: flex;
		align-items: center;
		justify-content: flex-end;
		color: #ccc;
	}

	.order-titleBox {
		display: flex;
	}

	.select {
		height: 100%;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.mask {
		width: 100%;
		background-color: #fff;
		position: fixed;
		top: 125rpx;
		z-index: 10;
	}

	.maskBtnBox {
		padding: 20rpx;
		display: flex;
		flex-wrap: wrap;
	}

	.maskBtnBox>button {
		width: 45%;
		margin-bottom: 25rpx;
		font-size: 30rpx;
		padding: 10rpx;
	}

	.headerType {
		color: #007aff;
		border: #007aff 1px solid;
		background-color: rgb(211, 255, 255, 0.3);
	}
</style>